<ng-container *ngFor="let main of mains">
  <mat-form-field appearance="legacy" floatLabel="always">
    <mat-label [innerText]="'ARTIFACT.' + main | translate"></mat-label>
    <mat-select
      [value]="data[main.toLowerCase()].name"
      (selectionChange)="onSelect(main, $event.value)"
    >
      <mat-option></mat-option>
      <mat-option *ngFor="let main of mainList" [value]="main.name">
        <span [innerText]="'PROPS.' + main.name.toUpperCase() | translate"></span>
        -
        <span
          [innerText]="main.isPercent?(main.value | percent: '1.0-1' | noComma):(main.value | number: '1.0-0' | noComma)"
        ></span>
      </mat-option>
    </mat-select>
  </mat-form-field>
  <br />
</ng-container>
<ng-container *ngIf="!isAuto">
  <table>
    <tr *ngFor="let sub of subs">
      <td>
        <mat-form-field appearance="legacy" floatLabel="always" class="sub-field">
          <mat-label [innerText]="'ARTIFACT.' + sub | translate"></mat-label>
          <mat-select
            [value]="data[sub.toLowerCase()].name"
            (selectionChange)="onSelect(sub, $event.value)"
          >
            <mat-option></mat-option>
            <ng-container *ngFor="let subValue of subList">
              <ng-container *ngIf="!isDuplicate(sub.toLowerCase(), subValue)">
                <mat-option [value]="subValue">
                  <span [innerText]="'PROPS.' + subValue.toUpperCase() | translate"></span>
                </mat-option>
              </ng-container>
            </ng-container>
          </mat-select>
        </mat-form-field>
      </td>
      <td class="one-line-div">
        <mat-slider
          color="primary"
          [thumbLabel]="true"
          [value]="data[sub.toLowerCase()].name?(dataReliquaryAffix[data[sub.toLowerCase()].name!].indexOf(data[sub.toLowerCase()].value!)):0"
          (change)="onChangeSubSlider($event, sub, data[sub.toLowerCase()].name!)"
          [disabled]="!data[sub.toLowerCase()].name"
          [displayWith]="displayWith"
          [max]="subMax"
          [min]="subMin"
          [step]="subStep"
          tickInterval="auto"
        >
        </mat-slider>
        <mat-form-field
          appearance="legacy"
          class="field-part-2"
          [matTooltip]="(data[sub.toLowerCase()].value ?? 0).toString()"
          matTooltipPosition="right"
        >
          <input
            type="number"
            matInput
            title=""
            [disabled]="!data[sub.toLowerCase()].name"
            [step]="subStep"
            [value]="percent_props.includes(data[sub.toLowerCase()].name ?? '')?(((data[sub.toLowerCase()].value ?? 0) * 100).toFixed(1) | removeZeroSuffix):((data[sub.toLowerCase()].value ?? 0).toFixed(0))"
            (change)="onChangeSubValue($event, sub, data[sub.toLowerCase()].name!)"
          />
          <span matSuffix *ngIf="percent_props.includes(data[sub.toLowerCase()].name??'')">%</span>
        </mat-form-field>
        <!-- <span class="sub-span"
                    [innerText]="percent_props.includes(data[sub.toLowerCase()].name ?? '')?(data[sub.toLowerCase()].value ?? 0 | percent: '1.0-1' | noComma):(data[sub.toLowerCase()].value ?? 0 | number: '1.0-0' | noComma)"
                    [matTooltip]="(data[sub.toLowerCase()].value ?? 0).toString()" matTooltipPosition="right">
                </span> -->
      </td>
    </tr>
  </table>
  <div class="chip-div">
    <app-artifact-chips
      [characterIndex]="characterIndex"
      [index]="index"
      [isAuto]="isAuto"
      [part]="artifactType"
    ></app-artifact-chips>
  </div>
</ng-container>
